<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false"></cu-custom>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择发布类型</view>
				</view>
				<view class="padding-xl">
					<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
						<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*column" @tap="clickItem(item.url)">
							<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
								<view class="cu-tag badge" v-if="item.badge!=0">
									<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
								</view>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: 'Modal',
				cuIconList: [{
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '心情',
					url: '/xinqing'
				}, {
					cuIcon: 'locationfill',
					color: 'olive',
					badge: 0,
					name: '签到',
					url: '/qiandao'
				}, {
					cuIcon: 'game',
					color: 'purple',
					badge: 0,
					name: '游戏',
					url: '/youxi'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '推荐',
					url: '/tuijian'
				}, {
					cuIcon: 'playfill',
					color: 'purple',
					badge: 0,
					name: '音乐',
					url: '/yinyue'
				}, {
					cuIcon: 'recordfill',
					color: 'mauve',
					badge: 0,
					name: '电影',
					url: '/dianying'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '秘密',
					url: '/mimi'
				}, {
					cuIcon: 'babyfill',
					color: 'purple',
					badge: 0,
					name: '漂流瓶',
					url: '/piaoliuping'
				}],
				modalName: null,
				gridCol: 3,
				column: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
			}
		},
		onLoad() {
			this.modalName = 'Modal'
		},
		onShow() {
			this.modalName = 'Modal'
		},
		methods: {
			hideModal(e) {
				this.modalName = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
